<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片延迟加载的演示</title>
<style>
* {
	margin:0;
	padding:0;
}
body {
	background:#e3e3e3;
	height:100%;
	font:normal normal 12px/24px "Microsoft yahei", Arial;
}
#title{width:200px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
a { color:#09c; }
#wrapper {
	width:200px;
	margin:0 auto 50px;
	background:#f8f8f8;
	border:1px solid #a3a3a3;
	padding:20px;
	border-radius:5px;-moz-border-radius:5px;
}
ul{ list-style:none; }
ul a{ font-size:14px; }
a:hover{ text-decoration:none; }

</style>

</head>

<body>
<div id="title">
<h1>图片延迟加载的演示</h1>
<h6>by: <a href="http://stylechen.com/">Stylechen.com</a>, <a href="http://stylechen.com/imglazyload2.html">how to use?</a></h6>
</div>
<div id="wrapper">
<ul>
	<li>请使用相应的工具(firebug、Fiddler2)监测加载的效果</li>
	<li><a href="normal.html">默认效果</a></li>
	<li><a href="container.html">自定义容器</a></li>
	<li><a href="tab.html">TAB的延迟加载</a></li>
	<li><a href="vertical.html">横向滚动加载</a></li>
	<li><a href="loadscript.html">无阻塞加载javascript广告</a></li>
</ul>
</div>

</body>
</html>
